<template>
    <el-form-item label-width="0">
        <el-divider class="custom-divider-margin-top">样式设置</el-divider>
        <div class="boxContainer-editor">
            <div>
                <span class="label_">对齐方式</span>
                <el-radio-group v-model="optionModels.textAlign" class="radio-group-custom">
              <el-radio-button label="left">{{ i18nt('designer.setting.leftAlign') }}</el-radio-button>
              <el-radio-button label="center">{{ i18nt('designer.setting.centerAlign') }}</el-radio-button>
              <el-radio-button label="right">{{ i18nt('designer.setting.rightAlign') }}</el-radio-button>
            </el-radio-group>
            </div>
            <div>
                <span class="label_">宽度</span>
                <el-input v-model="optionModels.width"></el-input>
            </div>
            <div>
                <span class="label_">高度</span>
                <el-input v-model="optionModels.height"></el-input>
            </div>
            <div>
                <span class="label_">最小高度</span>
                <el-input v-model="optionModels.minHeight"></el-input>
            </div>
           
            <div>
                <span class="label_">背景色</span>
                     <el-color-picker v-model="optionModels.backgroundColor" show-alpha></el-color-picker>
            </div>
            <div>
                <span class="label_">字体颜色</span>
                     <el-color-picker v-model="optionModels.color"></el-color-picker>
            </div>
            <div>
                <span class="label_">内边距</span>
                <el-input v-model="optionModels.padding"></el-input>
            </div>
            <div>
                <span class="label_">外边距</span>
                <el-input v-model="optionModels.margin"></el-input>
            </div>
       
        </div>
    </el-form-item>
</template>
<script>

import i18n from "@/utils/i18n";

export default {
    name: "boxContainer-editor",
    components: {},
      mixins: [i18n],
    props: {
        designer: Object,
        selectedWidget: Object,
        optionModel: Object,
    },
    computed: {
        optionModels() {
            return this.selectedWidget.options.initStyle || {}
        }
    },
    data() {
        return {}
    }

}
</script>
<style scoped lang="scss">
.boxContainer-editor {
  > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 5px;

    .el-input {
      width: calc(100% - 132px);
    }

    .label_ {
      display: inline-block;
      width: 120px;
      box-sizing: border-box;
      padding-right: 12px;
      font-size: 13px;
      color: #606266;
    }
  }
}
</style>
